<template>
    <div class="form-widget-container">
        <el-form 
            class="full-height-width widget-form" 
            :label-position="labelPosition"
            :label-width="labelWidth"
            :size="labelSize"
            :model="state.formModel"
        >
            <template v-if="designer.widgetList.length === 0">
                <div class="empty-tips">
                    请拖拽左侧控件到画布中
                </div>
            </template>
            <draggable
                class="form-widget-list"
                tag="ul"
                item-key="key"
                animation="300"
                :list="designer.widgetList"
                :group="{name: 'dragGroup'}"
                @add="dragAdd"
                @update="dragUpdate"
            >
                    <template #item="{element}">
                        <component
                            :is="getWidgetName(element)"
                            :designer="designer"
                            :field="element"
                            :form-config="formConfig"
                            :form-model="state.formModel"
                        />
                    </template>
            </draggable>
        </el-form>
    </div>
</template>

<script setup>
import { computed, getCurrentInstance, onBeforeMount, onMounted, reactive, watch,ref, nextTick } from 'vue';
import draggable from 'vuedraggable'
import './field-widget/index.ts'


const props = defineProps({
    designer:{
        type:Object,
        default:()=>({})
    },
    formConfig:{
        type:Object,
        default:()=>({})
    }
})

watch(
    ()=>props.designer.widgetList,
    ()=>{
        console.log(props.designer.widgetList);    
    },
    {
        deep:true
    }
)

const state = reactive({
    formModel: {},
})

// 全局表单设置字段的label位置
const labelPosition = computed(()=>{
    if(!!props.designer.formConfig && !! props.designer.formConfig.labelPosition){ 
        return props.designer.formConfig.labelPosition
    }
    return 'left'
})

const labelWidth = computed(()=>{
    return props.formConfig.labelWidth > 20 ? props.formConfig.labelWidth : 80
})

const labelSize = computed(()=>{
    return props.formConfig.size || ""
})


const getWidgetName = (element)=>{
    return 'xy-' + element.type
}

// 元素从其他列表拖拽进来会触发
const dragAdd = ()=>{
    props.designer.emitHistoryChange()
}
// 元素在当前列表中拖拽会触发
const dragUpdate = ()=>{
    props.designer.emitHistoryChange()
}
onBeforeMount(()=>{
    props.designer.initDesigner()
})

onMounted(()=>{
    props.designer.registerFormWidget(getCurrentInstance().proxy) 
})

onMounted(()=>{
    
})
</script>

<style lang="scss" scoped>
.form-widget-container{
    padding: 5px 8px;
}

.form-widget{
    width: 100%;
}

.form-widget-list{
    width: 100%;
    min-height: calc(100vh - 54px - 39px - 40px - 2px - 11px);
}
.empty-tips{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    font-size: 30px;
    letter-spacing: 5px;
}

</style>
